<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery制作按省份选择全国高校插件代码 - 快站网</title>
<style type="text/css">
*{margin:0;padding:0;outline:none;}
body{padding:20px;font:12px "微软雅黑";background:#FFF;}
ul li{list-style:none;}
#schoolName{width:200px;height:30px;line-height:30px;border:1px solid #ccc;padding:0 8px;cursor:pointer;font-size:12px;}
.provinceSchool{display:none;position:absolute;width:580px;height:auto;border:1px solid #72B9D7;}
.provinceSchool .title{width:100%;height:30px;background:#72B9D7;cursor:move;}
.provinceSchool .title span{margin-left:10px;font-weight:600;color:#FFF;line-height:30px;}
.provinceSchool .proSelect{width:550px;text-align:center;padding:15px 0;}
.provinceSchool .proSelect select{width:136px;}
.provinceSchool .proSelect span{padding-left:10px;}
.provinceSchool .proSelect input{display:none;}
.provinceSchool .schoolList{width:550px;height:180px;padding:10px 0;overflow-y:auto;border:1px solid #ddd;}
.provinceSchool .schoolList ul{width:510px;clear:both;}
.provinceSchool .schoolList ul span.entertext{display:block;height:180px;font:normal 16px/180px 'microsoft yahei';color:#999;}
.provinceSchool .schoolList ul li{float:left;text-align:center;width:160px;margin:5px;height:25px;line-height:25px;cursor:pointer;background:#fafafa;border-radius:3px;}
.provinceSchool .schoolList ul li.DoubleWidthLi{overflow:hidden;}
.provinceSchool .schoolList ul li:hover{background:#72B9D7;color:#fff;}
.provinceSchool .button{width:100%;height:40px;margin-top:8px;}
.provinceSchool .button button{float:right;height:30px;margin-right:15px;padding:2px 15px;background:#72B9D7;border:none;color:#FFF;font-weight:600;cursor:pointer;border-radius:3px;}
.provinceSchool .button button:hover{background:#2e90bd;}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/school.js"></script>
<script type="text/javascript">
$(function(){
	//province;
	//proSchool;
	//学校名称 激活状态
	$("#schoolName").focus(function(){
	  var top = $(this).position().top+$(this).height()+2;
	  var left = $(this).position().left;
	  $("div[class='provinceSchool']").css({top:top,left:left});
	  $("div[class='provinceSchool']").show();
	});
	//初始化省下拉框
	var provinceArray = "";
	var provicneSelectStr = "";
	for(var i=0,len=province.length;i<len;i++){
	  provinceArray = province[i];
	  provicneSelectStr = provicneSelectStr + "<option value='"+provinceArray[0]+"'>"+provinceArray[1]+"</option>"
	} 
	$("div[class='proSelect'] select").html(provicneSelectStr);
	//初始化学校列表
	var selectPro = $("div[class='proSelect'] select").val();
	var schoolUlStr = "";
	var schoolListStr = new String(proSchool[selectPro]);
	var schoolListArray = schoolListStr.split(",");
	var tempSchoolName = "";
	for(var i=0,len=schoolListArray.length;i<len;i++){
	  tempSchoolName = schoolListArray[i];
	  if(tempSchoolName.length>13){
		schoolUlStr = schoolUlStr + "<li class='DoubleWidthLi' title="+schoolListArray[i]+">"+schoolListArray[i]+"</li>"
	  }else {
		schoolUlStr = schoolUlStr + "<li>"+schoolListArray[i]+"</li>"
	  }
	}
	$("div[class='schoolList'] ul").html(schoolUlStr);
	//省切换事件
	$("div[class='proSelect'] select").change(function(){
	  if("99"!=$(this).val()){
		$("div[class='proSelect'] span").show();
		$("div[class='proSelect'] input").hide();
		schoolUlStr = "";
		schoolListStr = new String(proSchool[$(this).val()]);
		schoolListArray = schoolListStr.split(",");
		for(var i=0,len=schoolListArray.length;i<len;i++){
		  tempSchoolName = schoolListArray[i];
		  if(tempSchoolName.length>13){
			schoolUlStr = schoolUlStr + "<li class='DoubleWidthLi' title="+schoolListArray[i]+">"+schoolListArray[i]+"</li>"
		  }else {
			schoolUlStr = schoolUlStr + "<li>"+schoolListArray[i]+"</li>"
		  }
		}
		$("div[class='schoolList'] ul").html(schoolUlStr);
	  }
	  else {
		$("div[class='schoolList'] ul").html("<span class='entertext'>请在输入框内手动输入学校！</span>");
		$("div[class='proSelect'] span").hide();
		$("div[class='proSelect'] input").show();
	  }
	});
	//学校列表mouseover事件
	$("div[class='schoolList'] ul li").live("mouseover",function(){
	  $(this).css("background-color","#72B9D7");
	});
	//学校列表mouseout事件
	$("div[class='schoolList'] ul li").live("mouseout",function(){
	  $(this).css("background-color","");
	});
	//学校列表点击事件
	$("div[class='schoolList'] ul li").live("click",function(){
	  $("#schoolName").val($(this).html());
	  $("div[class='provinceSchool']").hide();
	});
	//按钮点击事件
	$("div[class='button'] button").live("click",function(){
	  var flag = $(this).attr("flag");
	  if("0"==flag){
		$("div[class='provinceSchool']").hide();
	  }else if("1"==flag){
		var selectPro = $("div[class='proSelect'] select").val();
		if("99"==selectPro){
		  $("#schoolName").val($("div[class='proSelect'] input").val());
		}
		$("div[class='provinceSchool']").hide();
	  }
	});
});
</script>
</head>
<body>
<br/><br/><br/>
<center>
<label for='schoolName'>学校名称：</label><input type="text" id="schoolName" placeholder="请点击选择学校" readonly />
<div id="proSchool" class="provinceSchool">
    <div class="title"><span>请选择学校</span></div>
    <div class="proSelect">
        <select></select>
        <span>如没找到选择项，请选择其他手动填写</span>
        <input type="text" />
    </div>
    <div class="schoolList">
        <ul></ul>
    </div>
    <div class="button">
        <button flag='0'>取消</button>
        <button flag='1'>确定</button>
    </div>
</div>	
</center>
</body>
</html>